import { Task } from '../types'
import { formatRelativeTime } from '../utils'
import { CheckCircle, Circle, Clock } from 'lucide-react'
import { TimeLabel, TaskTag, PriorityLabel, CategoryLabel } from './Tags'

interface TaskItemProps {
  task: Task
  onToggleComplete: (taskId: string) => void
  onClick: (taskId: string) => void
}

export default function TaskItem({ task, onToggleComplete, onClick }: TaskItemProps) {
  const handleToggleComplete = (e: React.MouseEvent) => {
    e.stopPropagation()
    onToggleComplete(task.id)
  }

  const handleClick = () => {
    onClick(task.id)
  }

  return (
    <div 
      className="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-all duration-200 cursor-pointer group min-h-[120px]"
      onClick={handleClick}
    >
      {/* 任务标题和完成状态 */}
      <div className="flex items-start gap-3 mb-3">
        {/* 完成状态按钮 */}
        <button
          onClick={handleToggleComplete}
          className={`flex-shrink-0 mt-0.5 transition-all duration-200 ${
            task.completed 
              ? 'text-green-500 hover:text-green-600' 
              : 'text-slate-400 hover:text-slate-600'
          }`}
        >
          {task.completed ? (
            <CheckCircle size={20} className="animate-fade-in" />
          ) : (
            <Circle size={20} />
          )}
        </button>

        {/* 任务内容 */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1">
            <h3 className={`font-semibold text-sm sm:text-base ${
              task.completed 
                ? 'line-through text-slate-400' 
                : 'text-slate-900'
            }`}>
              {task.title}
            </h3>
            {/* 重复任务标识 */}
            {(task as any).isRecurring && (
              <div className="flex items-center gap-1">
                <div className="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse"></div>
                <span className="text-xs text-blue-600 font-medium bg-blue-50 px-1.5 py-0.5 rounded flex items-center gap-1">
                  {(task as any).recurringType === 'daily' ? '每天' :
                   (task as any).recurringType === 'weekly' ? '每周' :
                   (task as any).recurringType === 'monthly' ? '每月' :
                   (task as any).recurringType === 'yearly' ? '每年' : '重复'}
                  {(task as any).recurringInstanceCount && (task as any).recurringInstanceCount > 1 && (
                    <span className="ml-0.5 px-1 py-0.5 bg-blue-100 text-blue-700 rounded text-xs font-bold">
                      {(task as any).recurringInstanceCount}
                    </span>
                  )}
                </span>
              </div>
            )}
          </div>
          
          {task.description && (
            <p className="text-slate-600 text-xs sm:text-sm leading-relaxed line-clamp-2">
              {task.description}
            </p>
          )}
        </div>
      </div>

      {/* 优先级和分类标签区域 - 靠右对齐 */}
      <div className="flex flex-wrap items-center justify-end gap-2 mb-3">
        <PriorityLabel priority={task.priority} />
        <CategoryLabel category={task.category} />
      </div>

      {/* 底部元信息区域 - 任务标签、创建时间和到期时间在一行 */}
      <div className="flex items-center justify-between mt-3 pt-3 border-t border-slate-100">
        {/* 左侧：任务标签 */}
        <TaskTag tags={task.tags || []} maxDisplay={2} />
        
        {/* 右侧：创建时间和到期时间 */}
        <div className="flex items-center gap-3">
          {/* 创建时间 */}
          <div className="flex items-center gap-1 text-xs text-slate-500">
            <Clock size={12} />
            <span title={`创建于 ${task.createdAt.toLocaleString('zh-CN')}`}>
              {formatRelativeTime(task.createdAt)}
            </span>
          </div>

          {/* 截止日期 */}
          <TimeLabel task={task} />
        </div>
      </div>
    </div>
  )
}